<template>
    <el-menu :default-active="$route.path" mode="horizontal" :ellipsis="false" router @select="handleSelect"
        style="height: 40px;">
        <el-button link @click="">
            <el-icon-Menu width="30px" />
        </el-button>
        <SvgIcon icon="tools" style="width: 20px; padding-left: 10px;" />
        <div class="flex-grow" />
        <el-menu-item index="/">文本</el-menu-item>
        <el-menu-item index="/shell">终端</el-menu-item>
        <el-menu-item index="/graphics">图形</el-menu-item>
        <el-menu-item index="/file_manager">文件管理</el-menu-item>
        <el-menu-item index="/config">配置</el-menu-item>
        <el-menu-item index="/info">信息</el-menu-item>
        <div class="flex-grow" />
        <el-button :type="connect_state ? 'success' : 'warning'" :loading="connecting" @click=""
            style="height: 90%;margin: auto;margin-right: 5px;">
            <SvgIcon v-if="!connect_state && !connecting" icon="disconnect" style="width: 20px;" />
            <SvgIcon v-if="connect_state" icon="connect" style="width: 20px;" />
            <span style="padding-left: 5px;">
                {{ connect_state ? '已连接' : '已断开' }}
            </span>
        </el-button>
        <el-popconfirm width="300" title="是否让设备将进入深度睡眠以减少功耗, 添加待机时间" confirm-button-text="确认" cancel-button-text="取消"
            @confirm="shutdown">
            <template #reference>
                <el-button type="danger" style="height: 90%;margin: auto;">
                    关机
                </el-button>
            </template>
        </el-popconfirm>
    </el-menu>
</template>

<script setup lang="ts">
import Bus from "~/utils/bus";
import ws from "~/utils/ws";
import { ElMessage } from 'element-plus'
import "element-plus/es/components/message/style/css"

const connect_state = ref(ws.connect)
const connecting = ref(ws.connecting)

const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

const shutdown = () => {
    Bus.emit('push.msg', { api: 'deep_sleep' })
}

setTimeout(() => {
    if (window.newVersion) {
        window.newVersion = false;
        ElMessage.success("页面升级成功")
    }
}, 500)
</script>

<style scoped>
.flex-grow {
    flex-grow: 1;
}
</style>